<!-- 未来三个月现金流情况 -->
<template>
	<mostDrawer :isShow="isShow" :isReadOnly="isReadOnly" :handleType="handleType" :currentRow="currentRow" :tableHeaderList="tableHeaderList" @close="handleClose" :rowClassName="rowClassName" :noFormatColNumList="[0, 1]" topRightTxt="日期"></mostDrawer>
</template>

<script setup>
	import { ref, watch } from 'vue';
	import { setOrder } from '@/utils/publicUtils';
	import mostDrawer from './mostDrawer.vue';
	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
	});

	const emit = defineEmits(['close']);
	let tableHeaderList = ref([]);

	watch(
		() => props.currentRow,
		() => {
			initHeader();
			setOrder(tableHeaderList.value);
		},
	);

	//关闭抽屉
	const handleClose = data => {
		emit('close', data);
	};

	//未来三个月
	let topRightDate = ref('');
	const getNextThreeMonths = () => {
		let reportYear = Number(props.currentRow.reportTime.match(/\d{4}/)[0]);
		let reportMonth = Number(props.currentRow.reportTime.match(/\d{2}(?=月)/)[0]);
		const months = [];
		for (let i = 0; i < 3; i++) {
			const nextMonth = new Date(reportYear, reportMonth + i);
            let year = nextMonth.getFullYear();
			let month = (nextMonth.getMonth() + 1).toString().padStart(2, '0'); // 将月份填充为两位数
			months.push({ label: `${month}月`, year, month });
		}

		// 设置 topRightDate
		const startYear = months[0].year;
		const startMonth = months[0].month;
		const endYear = months[2].year;
		const endMonth = months[2].month;

		topRightDate.value = startYear === endYear ? `${startYear}.${startMonth}-${endMonth}` : `${startYear}.${startMonth}-${endYear}.${endMonth}`;
		return months;
	};

	const initHeader = () => {
		let headerList = [{ label: '序号', isTxt: true }, { label: '资金计划科目', isTxt: true }, { label: '合计' }];
		const targetIndex = headerList.findIndex(item => item.label === '资金计划科目') + 1;
		tableHeaderList.value = [...headerList.slice(0, targetIndex), ...getNextThreeMonths(), ...headerList.slice(targetIndex)];
	};

	//表格颜色
	const rowClassName = data => {
		if (data.row[0].level == 1) {
			return 'bg-color-eef4fe';
		}
		return '';
	};
</script>
